<template>
    <div id="userLoginView">
        <h2 style="margin-bottom: 16px">用户登录</h2>
        <a-form
            style="max-width: 480px; margin: 0 auto"
            label-align="left"
            auto-label-width
            :model="form"
            @submit="handleSubmit"
        >
            <a-form-item field="userAccount" label="账号">
                <a-input v-model="form.userAccount" placeholder="请输入账号" />
            </a-form-item>
            <a-form-item
                field="userPassword"
                tooltip="密码不少于 8 位"
                label="密码"
            >
                <a-input-password
                    v-model="form.userPassword"
                    placeholder="请输入密码"
                />
            </a-form-item>
			<a-form-item
			    field="getVerify"
			    label="验证码"
			>
			    <a-input 
				style="width: 50%; margin-right: 100px;"
			        v-model="verify"
			        placeholder="请输入验证码"
			    />
				<img :src="imageUrl" style="width: 100px;right: 0%; 
				height: 31px; border: 1px solid #ddd; cursor: pointer;border-radius: 6px;" @click="captureUrl" />
			</a-form-item>
            <div
                style="
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    width: 100%;
                "
            >
                <a-form-item style="margin: 0">
                    <a-button
                        type="primary"
                        html-type="submit"
                        style="width: 120px"
                    >
                        登录
                    </a-button>
                </a-form-item>
                <a
                    href="/user/register"
                    style="font-size: 13px; text-align: right; width: 120px"
                >
                    没有注册？点我
                </a>
            </div>
        </a-form>
    </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref, watchEffect } from "vue";
import { UserControllerService, UserLoginRequest } from "../../../generated";
import message from "@arco-design/web-vue/es/message";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import axios from "axios";

let verifyData = ref();
const verify = ref();
const imageUrl = ref(`http://localhost:8121/api/user/get/verify?${new Date().getTime()}`);
watchEffect(()=>{
	
})

onMounted(()=>{
	setTimeout(()=>{
		axios.get<Resp>("http://localhost:8121/api/user/get/verifyData").then(Response=>{
			console.log(Response);
			verifyData.value = Response.data.data;
		});
	},500)
	imageUrl.value = `http://localhost:8121/api/user/get/verify?${new Date().getTime()}`;
	verify.value = verifyData.value;
})

const captureUrl = () =>{
	setTimeout(()=>{
		axios.get<Resp>("http://localhost:8121/api/user/get/verifyData").then(Response=>{
			console.log(Response);
			verifyData.value = Response.data.data;
		});
	},500)
	imageUrl.value = `http://localhost:8121/api/user/get/verify?${new Date().getTime()}`;
}

/**
 * 表单信息
 */
const form = reactive({
    userAccount: "",
    userPassword: "",
} as UserLoginRequest);

const router = useRouter();
const store = useStore();

const register = () => {
    router.push("user/register");
};
/**
 * 提交表单
 * @param data
 */

type Resp = {
	code: number,
	message: string,
	data: {
		verify: string;
	}
}
const handleSubmit = async () => {
    const res = await UserControllerService.userLoginUsingPost(form);
	console.log("verify.value",verify.value)
	console.log("verifyData.value",verifyData.value)
	if(verifyData.value == verify.value){
		console.log("验证成功")
	}else{
		message.error("登陆失败,验证码错误");
		return;
	}
    // 登录成功，跳转到主页
    if (res.code === 0) {
        await store.dispatch("user/getLoginUser");
        router.push({
            path: "/PersonHome",
            replace: true,
        });
    } else {
        message.error("登陆失败，" + res.message);
    }
};
</script>
